<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>14.创建节点添加节点</title>
</head>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
        }
    </style>
<body>
    <!-- <div><a href="https://www.baidu.com/" target="_blank">百度</a></div> -->
    <div id="box">
        我是内容
    </div>
    <p>我是外面的p元素</p>

    <script src="../jquery-3.2.1.js"></script>
    <script>
        
        $(function(){       // 添加节点内容
            // $("#box").append('<div><a href="https://www.baidu.com/" target="_blank">百度</a></div>');

            // var $li = $('<div><a href="https://www.baidu.com/" target="_blank">百度</a></div>'); //创建jq对象
            // console.log($li);
            // $("div").append($li);

            // $("div").append($("p"));    // 添加到子元素的最后面
            // $("p").appendTo($("div"));    // 效果与上面的一致 只不过父元素子元素相反
            // $("div").prepend($("p"));    // 添加到子元素的最前面

            $('div').after($("p"));     // 添加到该元素的结束后面

        });

    </script>
</body>
</html>